<style scoped lang="scss">
.xy-cascader {
    width: 100%;
    .label-box {
        justify-content: space-between;
    }
}

</style>
<template>
    <picker
        class="xy-cascader "
        mode="multiSelector"
        :value="indexData"
        :range="range"
        :range-key="labelName"
        @change="valueChange"
        @columnchange="handleColumnChange">
        <view class="label-box flex">
            <view class="label flex">
                <view class="m-l-xs" :key="index" v-for="(item,index) in value">{{item}}</view>
            </view>
            <view class="xyicon xyicon-down"></view>
        </view>
    </picker>
</template>
<script>
export default {
    name: 'XyCascader',
    props: {
        value: {
            type: [Array, String],
            default: () => {
                return [];
            }
        },
        options: {
            type: Array,
            default: () => {
                return []
            }
        },
        action: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        labelName: {
            type: String,
            default: 'label'
        },
        valueField: {
            type: String,
            default: 'value'
        }
    },
    data() {
        return {
            indexData: [0,0,0], // 列选中的项目
            optionsList: [],
            valueCurrent: '',
            range: []
        }
    },
    created: async function() {
        this.valueCurrent = this.value;
        if (typeof(this.valueCurrent) == 'string') {
            this.valueCurrent = this.valueCurrent.split(",");
        }
        this.optionsList = this.options;
        console.log('valueCurrent', this.valueCurrent);
        if (this.optionsList.length == 0) {
            let res = await this.util.request({
                url: this.action,
                data: {
                    id: 100000,
                    child: 0,
                    maxLevel: 3, // 2表示精确到市
                    nameAlias: this.labelName,
                    valueField: this.valueField,
                    current: this.valueCurrent,
                },
                method: 'get',
            });
            if (res.code == 200) {
                this.optionsList = res.data.dataList;
                if (res.data.indexData.length == 0) {
                    this.indexData = [0,0,0];
                } else {
                    this.indexData = res.data.indexData;
                }
            }
        }
    },
    watch: {
        indexData: {
            handler(val) {
                this.$set(this.range, 0, this.optionsList);
                if (val.length > 1) {
                    this.$set(this.range, 1, this.optionsList[val[0]].children);
                }
                if (val.length > 2) {
                    if (this.optionsList[val[0]].children.lenght > 0) {
                        this.$set(this.range, 2, this.optionsList[val[0]].children[val[1]].children);
                    }
                }
                if (val.length > 3) {
                    if (this.optionsList[val[0]].children[val[1]].children.lenght > 0) {
                        this.$set(this.range, 3, this.optionsList[val[0]].children[val[1]].children[val[2]].children);
                    }
                }
            },
            deep: true
        }
    },
    methods: {
        async getChild(value) {
            let res = await this.util.request({
                url: this.action,
                data: {
                    id: value,
                    child: 1,
                    maxLevel: 3, // 2表示精确到市
                    nameAlias: this.labelName,
                    valueField: this.valueField
                },
                method: 'get',
            });
            if (res.code == 200) {
                return res.data.dataList;
            } else {
                return false;
            }
        },
        valueChange(event) {
            let indexData = event.detail.value;
            console.log(indexData);
            for (var i = 0; i < indexData.length; i++) {
                this.$set(this.valueCurrent, i, this.range[i][indexData[i]][this.valueField]);
            }
            console.log(this.valueCurrent);
            this.$emit('input', this.valueCurrent);
        },
        async handleColumnChange(e) {
            if (this.action) {
                let indexData = this.indexData;
                let column = e.detail.column;
                let index = e.detail.value;
                let value = this.range[column][index].value;
                let optionsList = this.optionsList;
                indexData[column] = index;
                console.log(indexData);
                switch (column) {
                    case 0:
                        if (optionsList[indexData[0]].children
                            && optionsList[indexData[0]].children.length == 0) {
                            optionsList[indexData[0]].children = await this.getChild(value);
                        }
                        for (var i = 1; i < indexData.length; i++) {
                            indexData[i] = 0
                        }
                        break;
                    case 1:
                        if (optionsList[indexData[0]].children[indexData[1]].children
                            && optionsList[indexData[0]].children[indexData[1]].children.length == 0) {
                            optionsList[indexData[0]].children[indexData[1]].children = await this.getChild(value);
                        }
                        for (var i = 2; i < indexData.length; i++) {
                            indexData[i] = 0
                        }
                        break;
                    case 2:
                        if (optionsList[indexData[0]].children[indexData[1]].children[indexData[2]].children
                            && optionsList[indexData[0]].children[indexData[1]].children[indexData[2]].children.length == 0) {
                            optionsList[indexData[0]].children[indexData[1]].children[indexData[2]].children = await this.getChild(value);
                        }
                        for (var i = 3; i < indexData.length; i++) {
                            indexData[i] = 0
                        }
                        break;
                    case 3:
                        if (optionsList[indexData[0]].children[indexData[1]].children[indexData[2]].children[indexData[3]].children
                            && optionsList[indexData[0]].children[indexData[1]].children[indexData[2]].children[indexData[3]].children.length == 0) {
                            optionsList[indexData[0]].children[indexData[1]].children[indexData[2]].children[indexData[3]].children = await this.getChild(value);
                        }
                        for (var i = 4; i < indexData.length; i++) {
                            indexData[i] = 0
                        }
                        break;
                }
                let val = indexData;
                this.$set(this.range, 0, this.optionsList);
                if (val.length > 1) {
                    this.$set(this.range, 1, this.optionsList[val[0]].children);
                }
                if (val.length > 2) {
                    this.$set(this.range, 2, this.optionsList[val[0]].children[val[1]].children);
                }
                if (this.indexData.length > 3) {
                    this.$set(this.range, 3, this.optionsList[val[0]].children[val[1]].children[val[2]].children);
                }
                this.optionsList = optionsList;
                this.indexData = indexData;
                console.log('indexData', this.indexData);
            }
        }
    }
}

</script>
